<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .nav{
        width: 800px;
        height: 100px;
        margin: auto;
        display: flex;
        align-items: center;
    }
    .nav input{
        width:  600px;
        height: 100px;
    }
    .nav button{
        width: 200px;
        height: 100px;
        background-color: bisque;
        color: chocolate;
        font-size: 20px;
        border: orange;
        border-radius: 5px;
    }
    .container{
        width: 800px;
        display: flex;
        margin: 0px auto;
    }
    h3{
        background-color: rgb(212, 212, 212);
        color: rgb(10, 10, 10);
        text-align: center;
        width:400px ;
        height: 80px;
        padding-top: 30px;
    }
    .todo,.done{
        width: 50%;
        height: 100%;
    }
    .row{
        width: 400px;
        display: flex;
        align-items: center;
    }
    span{
        width: 200px;
        font-size: 20px;
        margin-left: 5px;
    }
    .row button{
        width: 80px;
        height: 30px;
        font-size: 20px;
        margin-top: 20px;
    }
</style>
<body>
    <div class="nav">
        <input type="text"><button onclick="newjobe()">新建任务</button>
    </div>
    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
            <div class="row">
                <input type="checkbox">
                <span>吃饭</span>
                <button>删除</button>
            </div>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>
<script>
    // 新建任务函数
    function newjobe(){
        // 获取输入框的值
        let input = document.querySelector(".nav input")
        let input_infor = input.value;
        
        // 如果输入为空则返回
        if(input_infor==""){
            return ;
        }
        
        // 创建新任务元素
        let todo = document.querySelector(".todo")
        let div = document.createElement("div")
        let checkbox = document.createElement("input")
        checkbox.type = "checkbox"  // 创建复选框
        let span = document.createElement("span")
        span.innerHTML = input_infor  // 显示任务文本
        let button = document.createElement("button")
        button.innerHTML = "删除"  // 删除按钮
        
        // 组装任务元素
        div.appendChild(checkbox)
        div.appendChild(span)
        div.appendChild(button)
        div.className="row"
        todo.appendChild(div)
        
        // 为所有删除按钮绑定点击事件
        let delete_buttons = document.querySelectorAll(".row button")
        for(i = 0;i<delete_buttons.length;i++)
        {
            delete_buttons[i].onclick = function(){
                // 删除当前任务行
                let parent = this.parentNode
                let gray_parent = parent.parentNode
                gray_parent.removeChild(parent)
            }
        }
        
        // 为所有复选框绑定点击事件
        let checkbox_buttons = document.querySelectorAll(".row input")
        for(i=0;i<checkbox_buttons.length;i++){
            checkbox_buttons[i].onclick = function(){
                // 获取当前任务行和目标区域
                let row = this.parentNode
                let target
                
                // 根据复选框状态决定移动到"已完成"或"未完成"
                if(this.checked){
                    target = document.querySelector(".done")
                }else{
                    target = document.querySelector(".todo")
                }
                
                // 将任务移动到目标区域
                target.appendChild(row)
            }
        }
    }
</script>
</html>